<template>
  <section class="section white sec-4">
    <main>
      <div class="co-title-balls"></div>
      <h1 class="co-title">我们能帮您:</h1>
      <ul>
        <li>
          <p>定制开发符合您业务需要的官网或门户页面</p>
          <button class="co-btn arrow small" @click="scrollToDom('#sec-5')">查看例子</button>
        </li>
        <li>
          <p>定制开发能适配电脑、手机、平板等多个终端的H5或PC应用</p>
          <button class="co-btn arrow small" @click="scrollToDom('#sec-5')">查看例子</button>
        </li>
        <li>
          <p>定制开发微信/抖音/支付宝等跨平台的小程序</p>
          <button class="co-btn arrow small" @click="scrollToDom('#sec-5')">查看例子</button>
        </li>
        <li>
          <p>定制开发符合您组织/公司要求的大型B端应用程式</p>
          <button class="co-btn arrow small" @click="scrollToDom('#sec-5')">查看例子</button>
        </li>
      </ul>
    </main>
  </section>
</template>
<script>
import { scrollToDom } from '../util';

export default {
  name: 'co-section-4',
  methods: {
    scrollToDom,
  },
};
</script>
<style lang="less" scoped>
.sec-4 {
  ul {
    margin-top: 40px;
  }
  li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 30px 0;

    &:first-child {
      border-top: 1px solid #ddd;
    }

    p {
      font-size: 20px;
      font-weight: bold;
    }
  }
}

@media screen and (max-width: 1000px) {
  .sec-4 {
    .co-btn {
      display: none;
    }
  }
}
</style>
